﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H+ 后台主题UI框架 - 空白页</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
    <link href="css/plugins/jsTree/style.min.css" rel="stylesheet">
        <!-- Sweet Alert -->
    <link href="css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <link href="css/plugins/datapicker/datepicker3.css" rel="stylesheet">
    <!-- custom -->
	<style type="text/css">
		.form-group {margin:0 15px;}
	</style>
</head>

<body class="gray-bg">
	<div class="row">
		<div class="col-sm-12">
			<div class="wrapper wrapper-content  animated fadeInRight">
				<div class="ibox float-e-margins">
					<div class="tabs-container">
						<ul class="nav nav-tabs" id="myTab">
							<li class="active">
								<a data-toggle="tab" href="#tab-1"><i class="fa fa-user"></i>地区公司基础信息汇总</a>
							</li>
							<li class="">
								<a data-toggle="tab" href="#tab-2"><i class="fa fa-user"></i>地区公司项目业态信息汇总</a>
							</li>
							<li class="">
								<a data-toggle="tab" href="#tab-3"><i class="fa fa-user"></i>已接管项目基础信息明细</a>
							</li>
							<li class="">
								<a data-toggle="tab" href="#tab-4"><i class="fa fa-user"></i>区域基础信息汇总</a>
							</li>
						</ul>
						<div class="panel-body no-top-border">
							<div class="tab-content">
								<div id="tab-1" class="tab-pane active">
									<form role="form" class="form-inline">
										<div class="form-group">
											<label class="control-label">地区公司：</label>
											<select data-placeholder="选择地区公司" class="chosen-select form-control w200" tabindex="2">
												<option value="" selected="selected">选择地区公司</option>
												<option value="110000" hassubinfo="true">广州公司</option>
												<option value="120000" hassubinfo="true">北京公司</option>
											</select>
										</div>
										<div class="form-group">
											<button type="button" class="btn btn-success btn-sm"><i class="fa fa-search"></i>&nbsp;搜索</button>
											<button class="btn btn-info btn-sm" type="button"><i class="fa fa-random"></i><span class="bold">&nbsp;导出</span></button>
										</div>
									</form><br>
									<table class="table table-bordered">
										<thead>
											<tr>
												<th>序号</th>
												<th>地区公司</th>
												<th>项目数</th>
												<th>规划占地面积（M2）</th>
												<th>规划总建筑面积（M2）</th>
												<th>已接管建筑面积（M2）</th>
												<th>收费面积（M2）</th>
												<th>业户数</th>
												<th>空置单元数</th>
												<th>车位数</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td>1</td>
												<td>广州</td>
												<td>53</td>
												<td>3,700,156</td>
												<td>9,885,080</td>
												<td>9,658,302</td>
												<td>7,536,059</td>
												<td>73,380</td>
												<td>1,792</td>
												<td>36,705</td>
											</tr>
										</tbody>
									</table>
									<div class="text-right">
										<ul class="pagination">
											<li><a href="#">«</a></li>
											<li><a href="#">1</a></li>
											<li><a href="#">2</a></li>
											<li><a href="#">3</a></li>
											<li><a href="#">页数：1/10</a></li>
											<li><a href="#">总记录数：30</a></li>
										</ul>
									</div>
								</div>
								<div id="tab-2" class="tab-pane">
									<form role="form" class="form-inline">
										<div class="form-group">
											<label class="control-label">地区公司：</label>
											<select data-placeholder="选择地区公司" class="chosen-select form-control w200" tabindex="2">
												<option value="" selected="selected">选择地区公司</option>
												<option value="110000" hassubinfo="true">广州公司</option>
												<option value="120000" hassubinfo="true">北京公司</option>
											</select>
										</div>
										<div class="form-group">
											<button type="button" class="btn btn-success btn-sm"><i class="fa fa-search"></i>&nbsp;搜索</button>
											<button class="btn btn-info btn-sm" type="button"><i class="fa fa-random"></i><span class="bold">&nbsp;导出</span></button>
										</div>
									</form><br>
									<table class="table table-bordered">
										<thead>
											<tr>
												<th rowspan="2">序号</th>
												<th rowspan="2">地区公司</th>
												<th colspan="2">写字楼</th>
												<th colspan="2">住宅</th>
												<th colspan="2">公寓</th>
												<th colspan="2">别墅</th>
												<th colspan="2">商铺</th>
											</tr>
											<tr>
												<th>管理面积</th>
												<th>户数</th>
												<th>管理面积</th>
												<th>户数</th>
												<th>管理面积</th>
												<th>户数</th>
												<th>管理面积</th>
												<th>户数</th>
												<th>管理面积</th>
												<th>户数</th>
											</tr>
										</thead>
										<tbody>
										<tr>
											<td>1</td>
											<td>广州</td>
											<td>0</td>
											<td>0</td>
											<td>243,540</td>
											<td>2,176</td>
											<td>39,346</td>
											<td>546</td>
											<td>0</td>
											<td>0</td>
											<td>17,511</td>
											<td>173</td>
										</tr>
										</tbody>
									</table>
									<div class="text-right">
										<ul class="pagination">
											<li><a href="#">«</a></li>
											<li><a href="#">1</a></li>
											<li><a href="#">2</a></li>
											<li><a href="#">3</a></li>
											<li><a href="#">页数：1/10</a></li>
											<li><a href="#">总记录数：30</a></li>
										</ul>
									</div>
								</div>
								<div id="tab-3" class="tab-pane">
									<form role="form" class="form-inline">
										<div class="form-group">
											<label class="control-label">地区公司：</label>
											<select data-placeholder="选择地区公司" class="chosen-select form-control w200" tabindex="2">
												<option value="" selected="selected">选择地区公司</option>
												<option value="110000" hassubinfo="true">广州公司</option>
												<option value="120000" hassubinfo="true">北京公司</option>
											</select>
										</div>
										<div class="form-group">
											<button type="button" class="btn btn-success btn-sm"><i class="fa fa-search"></i>&nbsp;搜索</button>
											<button class="btn btn-info btn-sm" type="button"><i class="fa fa-random"></i><span class="bold">&nbsp;导出</span></button>
										</div>
									</form><br>
									<table class="table table-bordered">
										<thead>
											<tr>
												<th>序号</th>
												<th>地区公司</th>
												<th>服务中心</th>
												<th>规划总占地面积</th>
												<th>规划总建筑面积</th>
												<th>已接管总建筑面积</th>
												<th>总户数</th>
												<th>总车位数</th>
												<th>收费面积(㎡)</th>
												<th>业态</th>
												<th>管理费单价</th>
												<th>所辖区域</th>
											</tr>
										</thead>
										<tbody>
											<tr>
												<td rowspan="4">1</td>
												<td rowspan="4">重庆</td>
												<td rowspan="4">现代广场服务中心</td>
												<td rowspan="4">412341</td>
												<td rowspan="4">78000</td>
												<td rowspan="4">292000</td>
												<td rowspan="4">292000</td>
												<td rowspan="4">2115</td>
												<td rowspan="4">1285</td>
												<td rowspan="2">住宅</td>
												<td>1.2</td>
												<td>1-12栋</td>
											</tr>
											<tr>
												<td>1.5</td>
												<td>13-20栋</td>
											</tr>
											<tr>
												<td rowspan="2">商铺</td>
												<td>1.5</td>
												<td>西南商铺裙楼、东南商铺裙楼</td>
											</tr>
											<tr>
												<td>2.0</td>
												<td>东北商铺裙楼、西北商铺裙楼</td>
											</tr>
										</tbody>
									</table>
									<div class="text-right">
										<ul class="pagination">
											<li><a href="#">«</a></li>
											<li><a href="#">1</a></li>
											<li><a href="#">2</a></li>
											<li><a href="#">3</a></li>
											<li><a href="#">页数：1/10</a></li>
											<li><a href="#">总记录数：30</a></li>
										</ul>
									</div>
								</div>
								<div id="tab-4" class="tab-pane">
									<form role="form" class="form-inline">
										<div class="form-group">
											<button class="btn btn-info btn-sm" type="button"><i class="fa fa-random"></i><span class="bold">&nbsp;导出</span></button>
										</div>
									</form><br>
									<table class="table table-bordered">
										<thead>
										<tr>
											<th>序号</th>
											<th>区域</th>
											<th>地区公司数</th>
											<th>项目数</th>
											<th>规划占地面积（M2）</th>
											<th>规划总建筑面积（M2）</th>
											<th>已接管建筑面积（M2）</th>
											<th>收费面积（M2）</th>
											<th>业户数</th>
											<th>空置单元数</th>
											<th>车位数</th>
										</tr>
										</thead>
										<tbody>
										<tr>
											<td>1</td>
											<td>华南区域</td>
											<td>3</td>
											<td>53</td>
											<td>3,700,156</td>
											<td>9,885,080</td>
											<td>9,658,302</td>
											<td>7,536,059</td>
											<td>73,380</td>
											<td>1,792</td>
											<td>36,705</td>
										</tr>
										</tbody>
									</table>
									<div class="text-right">
										<ul class="pagination">
											<li><a href="#">«</a></li>
											<li><a href="#">1</a></li>
											<li><a href="#">2</a></li>
											<li><a href="#">3</a></li>
											<li><a href="#">页数：1/10</a></li>
											<li><a href="#">总记录数：30</a></li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>


    <!-- 全局js -->
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>
    <!-- jsTree plugin javascript -->
    <script src="js/plugins/jsTree/jstree.min.js"></script>

    <style>
        .jstree-open > .jstree-anchor > .fa-folder:before {
            content: "\f07c";
        }

        .jstree-default .jstree-icon.none {
            width: 0;
        }
    </style>
    <!--控制页面树元素-->
    <script>
        $(document).ready(function () {
            function demo_rename() {
                var ref = $('#jstree2').jstree(true),
                    sel = ref.get_selected();
                if (!sel.length) { return false; }
                sel = sel[0];
                ref.edit(sel);
            };
            $('#jstree2').jstree({
                'core': {
                    'check_callback': true,
					'data' : {
						'url' : '/js/demo/tree2.json',
						'data' : function (node) {
							return { 'id' : node.id };
						}
					}
                },
                'plugins': ['types', 'dnd'],
                'types': {
                    'default': {
                        'icon': 'fa fa-folder'
                    },
                    'html': {
                        'icon': 'fa fa-file-code-o'
                    },
                    'svg': {
                        'icon': 'fa fa-file-picture-o'
                    },
                    'css': {
                        'icon': 'fa fa-file-code-o'
                    },
                    'img': {
                        'icon': 'fa fa-file-image-o'
                    },
                    'son': {
                        'icon': 'fa fa-file-text-o'
                    }

                }
			});
        });


    </script>

    <!-- 自定义js -->
    <script src="js/content.js?v=1.0.0"></script>
    <script type="text/javascript">
   // 使页面中所有.modal元素在窗口可视范围之内居中

        function centerModals() {
            $('.modal').each(function (i) {
                var $clone = $(this).clone().css('display', 'block').appendTo('body');
                var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
                top = top > 50 ? top : 0;
                $clone.remove();
                $(this).find('.modal-content').css("margin-top", top - 50);
            });
        }
        // 在模态框出现的时候调用垂直居中函数

        $('.modal').on('show.bs.modal', centerModals);
        // 在窗口大小改变的时候调用垂直居中函数

        $(window).on('resize', centerModals);

    
       //--动画效果--
        $(document).ready(function () {
            $('.contact-box').each(function () {
                animationHover(this, 'pulse');
            });
			$('#tab-1 .btn-edit').click(function () {
				$('a[href="#tab-2"]').tab('show');
			})
        });
    </script>

    <script>
        $(document).ready(function () {

            // Local script for demo purpose only
            $('#lightVersion').click(function (event) {
                event.preventDefault()
                $('#ibox-content').removeClass('ibox-content');
                $('#vertical-timeline').removeClass('dark-timeline');
                $('#vertical-timeline').addClass('light-timeline');
            });

            $('#darkVersion').click(function (event) {
                event.preventDefault()
                $('#ibox-content').addClass('ibox-content');
                $('#vertical-timeline').removeClass('light-timeline');
                $('#vertical-timeline').addClass('dark-timeline');
            });

            $('#leftVersion').click(function (event) {
                event.preventDefault()
                $('#vertical-timeline').toggleClass('center-orientation');
            });

            $('#leftVersion').click();
            $('#lightVersion').click();
        });
    </script>
       <!-- Sweet alert -->
    <script src="js/plugins/sweetalert/sweetalert.min.js"></script>
</body>

</html>
